<template>
	<view>
		<view class="content">
			<view class="homeHeader">
				<view class="headerItem" v-for="(item,key) in headerLst" :key="key"  @click="getToPage(item.url)">
					<view class="headerIcon iconfont" :class="item.icon"></view>
					<text class="headerTxt">{{item.text}}</text>
				</view>
			</view>
			<view class="calBlock">
			    <uni-calendar 
			    :insert="true"
			    :lunar="true" 
			    :start-date="'2021-8-1'"
			    :end-date="'2021-8-7'"
				:selected="dateArr"
				:showMonth= "false"
			     />
			</view>
			<view class="homeMain">
				<view class="attendItem" v-for="(item,key) in attendLst" :key="key">
					<view class="attendLeft">
						<view :class="item.icon" class="attendIcon iconfont"></view>
						<text class="attendTxt">{{item.title}}</text>
						<text class="attendTxt">{{item.detail}}</text>
					</view>
					<view class="attendRight" :class="{'isClickBtn':item.isClick}" @click="askForLeave(item.type)">
						{{item.clickTxt}}
					</view>
				</view>
			</view>
			<view class="newsBlock">
				<view class="newsItem" v-for="(item,key) in newsLst" :key="key">
					<view class="iconfont newsIcon" :class="item.icon"></view>
					<view class="newsDetail">
						<view class="newsHead">
							<view class="newsTitle">
								<text class="newsTop" v-if="item.isTop">[置顶]</text>
								<text class="newsTitleTxt">{{item.title}}</text>
							</view>
							<text class="newsTime">{{item.time}}</text>
						</view>
						<view class="newsContent">
							<view class="newsContentTxt">
								{{item.detail}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>	
	import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue'
	export default {
		name: 'Home',
		components: {
			uniCalendar
		},
		data() {
			return {
				dateArr:[],
				headerLst:[
					{
						icon:'icon-complete',
						text:'打卡',
						url:'/pages/home/clockPage'
					},{
						icon:'icon-manage-order',
						text:'请假',
						url:'/pages/home/leaveForm?type=请假'
					},{
						icon:'icon-usercenter',
						text:'申请',
						url:'/pages/home/application'
					}
				],
				attendLst:[
					{
						icon:'icon-survey',
						title:'今日打卡成功： ',
						detail:'1/2',
						isClick:false,
						clickTxt:'补打卡',
						type:'补打卡'
					},{
						icon:'icon-calculator',
						title:'今日外出： ',
						detail:'2小时',
						isClick:true,
						clickTxt:'销外出',
						type:'销外出'
					},{
						icon:'icon-calculator',
						title:'今日请假/调休： ',
						detail:'0.5天',
						isClick:true,
						clickTxt:'销假',
						type:'销假'
					},{
						icon:'icon-calculator',
						title:'今日出差： ',
						detail:'0.5天',
						isClick:true,
						clickTxt:'销出差',
						type:'销出差'
					},{
						icon:'icon-calculator',
						title:'今日申请加班： ',
						detail:'2小时',
						isClick:true,
						clickTxt:'申请',
						type:'加班'
					}
				],
				newsLst:[]
			}
		},
		methods: {
			getNewLst(){
				this.$request('/api/getNewsLst', {}).then(res => {
					// 打印调用成功回调
					this.newsLst = res.data.list
				}).catch(err => {
					console.log(err)
				})
			},
			getDateLst(){
				let curDate = this.$moment().subtract(0,'month').format('YYYY-MM-DD')
				let firstDay = this.$moment(curDate).startOf('month').format('YYYY-MM-DD')
				let disDays = this.$moment(curDate).diff(this.$moment(firstDay),'days')
				for(let i = disDays; i > 0; i --){
					let curDay = this.$moment().subtract(i,'days').format('YYYY-MM-DD')
					var weekOfday = this.$moment(curDay).format('E')
					if(weekOfday == 7 || weekOfday == 6) {
						continue
					}
					this.dateArr.push({date: curDay, info: '签到'})	
				}
			},
			getToPage(url){
				uni.navigateTo({
					url,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			askForLeave(type){
				uni.navigateTo({
					url:`/pages/home/leaveForm?type=${type}`,
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		},
		onLoad() {
		},
		onReady(){
		    this.getNewLst()
			this.getDateLst()
		},
	};
</script>

<style scoped lang="scss">
.homeHeader{
	position: fixed;
	top: 0;
	left:0;
	right: 0;
	height: 264.58rpx;
	background-color: $themeColor;
	display: flex;
	align-items: center;
	justify-content: space-around;
	z-index: 1000;
	.headerItem{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color:$textColorWhite;
		.headerIcon{
			color:#FFFFFF;
			font-size: 104.16rpx;
		}
		.headerTxt{
			font-size: 37.5rpx;
			margin-top: 5px;
		}
	}
}
.calBlock{
	margin-top:264.58rpx;
}
.homeMain{
	background-color: #fff;
	padding:20.83rpx;
	border-top:2.08rpx solid #C0C0C0;
	border-bottom:12.5rpx solid #f8f8f8;
	.attendItem{
		display: flex;
		padding: 20.83rpx 0;
		justify-content: space-between;
		align-items: center;
		.attendLeft{
			display: flex;
			align-items: center;
			.attendIcon{
				font-size: 52.08rpx;
				color:$themeColor;
				margin-right: 4.16rpx;
			}
			.attendTxt{
				font-size: 33.33rpx;
			}
		}
		.attendRight{
			border: 2.08rpx solid #CCCCCC;
			color: #CCCCCC;
			border-radius: 4px;
			cursor: not-allowed;
			width:125rpx;
			height: 58.33rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			&.isClickBtn{
				color:$themeColor;
				border-color: $themeColor;
				cursor: pointer;
			}
		}
	}
}
.newsBlock{
	padding-bottom:var(--window-bottom);
	.newsItem{
		display: flex;
		align-items: center;
		padding:20.83rpx;
		.newsIcon{
			color:$themeColor;
			font-size:93.75rpx;
			margin-right: 10.41rpx;
		}
		.newsDetail{
			flex:1;
			display: flex;
			flex-direction: column;
			.newsHead{
				display: flex;
				justify-content: space-between;
				.newsTitle{
					font-size: 33.33rpx;
					.newsTop{
						color:red;
					}
					.newsTitleTxt{
						font-weight: 700;
					}
				}
				.newsTime{
					font-size: 29.16rpx;
					color:#cccccc;
				}
			}
			.newsContent{
				overflow: hidden;
				.newsContentTxt{
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					color:#cccccc;
					margin-top: 10.41rpx;
				}
			}
			
		}
		
	}
}
</style>
